@charset "UTF-8";
@import "reset";
//处理px单位的值，转换为rem单位；
@function r($px) {
    @return $px/100px*1rem;
}

//头部样式
* {
    font-size: 0;
}

.homepage {
    //  头部
    .head {
        height: r(89px);
        background-color: #b20000;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 r(20px);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        >i:first-child {
            font-size: r(30px);
        }
        >a{
            >img {
                width: r(264px);
            }
        }
        >div:last-child {
            border: r(3px) solid white;
            border-radius: r(50px);
            display: flex;
            padding: r(6px);
        }
    }
    //  内容部分
    .centont {
        padding-top: r(89px);
        padding-bottom: r(96px);
        //      轮播
        .img_lg {
            position: relative;
            .shaded_img {
                width: 100%;
                height: r(357px);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .shaded {
                height: r(104px);
                width: 100%;
                background-color: #744413;
                opacity: 0.9;
                position: absolute;
                bottom: 0;
                padding: r(12px) r(30px) r(6.5px) r(30px);
                .shaded_box {
                    margin-bottom: r(11px);
                    p {
                        font-size: r(26px);
                    }
                }
                div:last-child {
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;
                    div:first-child {
                        img {
                            width: r(19px);
                            height: r(18px);
                        }
                    }
                    div:nth-child(2) {
                        img {
                            width: r(21px);
                            height: r(12px);
                        }
                    }
                    span {
                        color: white;
                        font-size: r(18px);
                    }
                    .iconfont {
                        i {
                            font-size: 10px;
                            margin-left: 10px;
                            color: #cebeb1;
                            &:first-child {
                                color: #b60005;
                            }
                        }
                    }
                }
            }
        }
        //      上端新闻
        .new {
            padding: r(30px);
            .new_box1 {
                display: flex;
                justify-content: space-between;
                .new_left1 {
                    width: r(325px);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p {
                        font-size: r(25px);
                    }
                    div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        img {
                            width: r(19px);
                            height: r(17px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                }
                .new_right1 {
                    width: r(208px);
                    img {
                        width: 100%;
                    }
                }
            }
            hr {
                height: r(1px);
                margin: r(17px) 0;
            }
            .new_box2 {
                display: flex;
                justify-content: space-between;
                .new_left2 {
                    width: r(325px);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p {
                        font-size: r(25px);
                    }
                    div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        img {
                            width: r(19px);
                            height: r(17px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                }
                .new_right2 {
                    width: r(208px);
                    img {
                        width: 100%;
                    }
                }
            }
        }
        //      灰色背景 
        .GrayBackground {
            height: r(25px);
            background-color: #f5f5f5;
        }
        //      三联图片
        .middle {
            width: r(583px);
            height: r(204px);
            margin: r(35px) r(29px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .middle_txet {
                p {
                    font-size: r(25px);
                }
            }
            .middle_img {
                width: r(583px);
                display: flex;
                justify-content: space-between;
                img {
                    width: r(188px);
                    height: r(123px);
                }
            }
            .middle_footer {
                display: flex;
                justify-content: space-between;
                .middle_fl {
                    width: r(250px);
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;
                    div:first-child {
                        img {
                            width: r(27px);
                            height: r(27px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                    div:nth-child(2) {
                        img {
                            width: r(19px);
                            height: r(16px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                    div:last-child {
                        img {
                            width: r(17px);
                            height: r(16px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                }
                .middle_fr {
                    span {
                        font-size: r(20px);
                        color: #c5c5c5;
                    }
                }
            }
        }
        //      中间两列
        .journalism {
            padding: r(7px) r(30px) r(30px) r(30px);
            .journalism_box1 {
                display: flex;
                justify-content: space-between;
                .journalism_left1 {
                    width: r(325px);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p {
                        font-size: r(25px);
                    }
                    div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        img {
                            width: r(19px);
                            height: r(17px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                }
                .journalism_right1 {
                    width: r(208px);
                    img {
                        width: 100%;
                    }
                }
            }
            hr {
                height: r(1px);
                margin: r(17px) 0;
            }
            .journalism_box2 {
                display: flex;
                justify-content: space-between;
                .journalism_left2 {
                    width: r(325px);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p {
                        font-size: r(25px);
                    }
                    div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        img {
                            width: r(19px);
                            height: r(17px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                }
                .journalism_right2 {
                    width: r(208px);
                    img {
                        width: 100%;
                    }
                }
            }
        }
        
        //      底部三联
        .bottom {
            width: r(583px);
            height: r(204px);
            margin: r(7px) r(29px) r(35px) r(29px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .bottom_txet {
                p {
                    font-size: r(25px);
                }
            }
            .bottom_img {
                width: r(583px);
                display: flex;
                justify-content: space-between;
                img {
                    width: r(188px);
                    height: r(123px);
                }
            }
            .bottom_footer {
                display: flex;
                justify-content: space-between;
                .bottom_fl {
                    width: r(250px);
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;
                    div:first-child {
                        img {
                            width: r(27px);
                            height: r(27px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                    div:nth-child(2) {
                        img {
                            width: r(19px);
                            height: r(16px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                    div:last-child {
                        img {
                            width: r(17px);
                            height: r(16px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                }
                .bottom_fr {
                    span {
                        font-size: r(20px);
                        color: #c5c5c5;
                    }
                }
            }
        }
        
//      底部两列
        .lastnew {
            padding: r(7px) r(30px) 0 r(30px);
            .lastnew_box1 {
                display: flex;
                justify-content: space-between;
                .lastnew_left1 {
                    width: r(325px);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p {
                        font-size: r(25px);
                    }
                    div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        img {
                            width: r(19px);
                            height: r(17px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                }
                .lastnew_right1 {
                    width: r(208px);
                    img {
                        width: 100%;
                    }
                }
            }
            hr:nth-child(2) {
                height: r(1px);
                margin: r(17px) 0;
            }
            .lastnew_box2 {
                display: flex;
                justify-content: space-between;
                .lastnew_left2 {
                    width: r(325px);
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    p {
                        font-size: r(25px);
                    }
                    div {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        img {
                            width: r(19px);
                            height: r(17px);
                        }
                        span {
                            font-size: r(20px);
                            color: #c5c5c5;
                        }
                    }
                }
                .lastnew_right2 {
                    width: r(208px);
                    img {
                        width: 100%;
                    }
                }
            }
            hr:last-child{
                height: r(1px);
                margin: r(33px) 0 r(20px) 0;
            }
        }
        .last_text{
            text-align: center;
            padding-bottom: r(17px);
            p{
                font-size: r(22px);
                color: #bbbbbb;
            }
        }
    }
    //      尾部样式
    footer{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: 1px solid #bbb9ba;
        .tail{
            height: r(96px);
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #f5f5f5;
            li{
                text-align: center;
                &:first-child{
                    img{
                        width: r(47px);
                        height: r(38px);
                    }
                }
                &:nth-child(2){
                    img{
                        width: r(48px);
                        height: r(40px);
                    }
                }
                &:nth-child(3){
                    img{
                        width: r(41px);
                        height: r(41px);
                    }
                    p{
                        color: #b60005;
                    }
                }
                &:nth-child(4){
                    img{
                        width: r(42px);
                        height: r(46px);
                    }
                }
                &:last-child{
                    img{
                        width: r(70px);
                        height: r(43px);
                    }
                }
                p{
                    font-size: r(18px);
                    color: #8b8b8b;
                }
            }
        }
    }
}
.search{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(100%);
    padding-top: r(177px);
    padding-bottom: r(88px);
    transition: all 1s;
}
.Notlogin{
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    padding-top: r(176px);
    transition: all 1s;
}

